<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <div class="indexMain">
          <div class="banner">
              <el-carousel trigger="click" height="300px" arrow="never">
                <el-carousel-item v-for="(item,index) in imgList" :key="index">
                    <div class="banner_div">
                        <img :src="item.src">
                    </div>
                </el-carousel-item>
              </el-carousel>
          </div>
        <div class="section1 clearfix" >
         <el-form ref="form"
          :inline="true"
                   :model="formInline"
                   label-width="110px">

              <el-form-item label="应急预案类别：">
                	<el-select v-model="formInline.planCategory" >
                    <el-option v-for='(item,index) in types' :label="item.name" :value="item.value" :key='index'></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item class="fr">
            <a class="indexSearch" @click='$router.push({name:"search",params:formInline})'><i class="el-icon-search"></i> 搜索</a>

              </el-form-item>
              <el-form-item label="关键字："  class="fr">
                <el-input v-model="formInline.companyEmergencyName" style="width:200px;"></el-input>
              </el-form-item>
          </el-form>
        </div>

        <div class="clearfix information_index">
            <div class="fl information_half">
                <div class="halfDiv_top clearfix"><span></span><h3 class="fl">应急预案统计</h3></div>
                <div id="chart" ref="chart"></div>
            </div>

            <div class="fr information_half">
                <div class="halfDiv_top clearfix"><span></span><h3 class="fl">操作流程</h3></div>
                <div class="bzImg_box">
                    <img src="../../../static/images/bz_img.png">
                </div>
            </div>
        </div>

        <div class="clearfix information_index">
            <div class="fl information_half">
                <div class="halfDiv_top clearfix"><span></span><h3 class="fl">应急资讯</h3><router-link :to="{path:'list',query:{name:'应急资讯'}}"  class="fr">更多&gt;</router-link></div>
                <ul class="half_list">
                    <li v-for="(item,index) in halfList1" :key="index">
                        <router-link :to="{path:'listDetail',query:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
                        <span>{{item.publishTime.split(' ')[0]}}</span>
                    </li>
                </ul>
            </div>

            <div class="fr information_half">
                <div class="halfDiv_top clearfix"><span></span><h3 class="fl">应急知识</h3><router-link :to="{path:'list',query:{name:'应急知识'}}" class="fr">更多&gt;</router-link></div>
                <ul class="half_list">
                    <li v-for="(item,index) in halfList2" :key="index" class="clearfix">
                        <router-link :to="{path:'listDetail',query:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
                        <span>{{item.publishTime.split(' ')[0]}}</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- <div class="section3 modules_main">
          <h2 class="secTitle">企业信息录入管理</h2>
          <div class="modules_list clearfix">
            <el-col :span='8'
                    class="modules">
              <a @click="togochange('basic')"><img src="../../../static/images/basic_icon.png" />
                <p>基本信息</p>
              </a>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <a @click="togochange('risk')" :class="changemsg>1?'':'selectmsg'"><img src="../../../static/images/risk_icon.png" />
                <p>风险信息</p>
              </a>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <a  @click="togochange('resources')" :class="changemsg>=3?'':'selectmsg'"><img src="../../../static/images/resource_icon.png" />
                <p>应急资源信息</p>
              </a>
            </el-col>
          </div>
        </div> -->
        <!-- <div class="section4 modules_main">
          <h2 class="secTitle">企业应急预案管理</h2>
          <div class="modules_list clearfix">
            <el-col :span='8'
                    class="modules">
              <router-link to='estimate'><img src="../../../static/images/formation_icon.png" />
                <p>应急预案编制</p>
              </router-link>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <router-link to='onlineAssess' ><img src="../../../static/images/assess_icon.png" />
                <p>应急预案评审</p>
              </router-link>
            </el-col>
            <el-col :span='8'
                    class="modules">
               <a   @click="showmsg"><img src="../../../static/images/revise_icon.png" />
                <p  >应急预案修订</p>
              </a>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index'  @click.native="showmsg"><img src="../../../static/images/guide_icon.png" />
                <p  >应急预案备案指导</p>
              </router-link>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index' @click.native="showmsg"><img src="../../../static/images/drill_icon.png" />
                <p  >应急预案培训演练</p>
              </router-link>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index' @click.native="showmsg"><img src="../../../static/images/estimate_icon.png" />
                <p>应急能力评估</p>
              </router-link>
            </el-col>
          </div>
        </div> -->



		<el-dialog
				   title="提示"
				   :visible.sync="dialogVisible"
				   width="300px"
				  >
	        <div style="text-align: center;font-size: 16px;height:10px;line-height:10px;">
				暂未开通
			</div>

		</el-dialog>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import config from "../../config.js";
import Header from '../common/header'
import Footer from '../common/footer'
export default {
  data () {
    return {
        formInline: {
            companyEmergencyName:"" ,
            planCategory: ""
        },
        activeIndex:0,
        navList:[
          '应急动态','应急知识','应急处置卡'
        ],
        data:[],
        types:[
            {
                name:'全部',
                value:''
            },{
                name:'综合预案',
                value:'1'
            },{
                name:'专项预案',
                value:'2'
            },{
                name:'现场处置预案',
                value:'3'
            }
        ],
        dialogVisible:false,
        changemsg:1,
        loginstate:4,
        stepNote:true,
        imgList:[
            {src:'../../static/images/banner_01.png'},
            {src:'../../static/images/banner_02.png'}
        ],
        halfList1:[],
        halfList2:[]
    }
  },
  components: {
    Header,
    Footer
  },
  watch:{
    'activeIndex':function(newV,oldV){
      this.getList(newV+1)
    },
    '$store.state.loginstates': function (newVal) {
      this.loginstate = newVal;
    }
  },
  mounted(){
    
    if(localStorage.showFlag == 1){
       this.$store.state.showflag1=false
    }else{
      if(localStorage.showTime == 0){
        this.$store.state.showflag1 = true
        localStorage.removeItem('showTime')
      }
    }
    this.initCharts();
   //  this.getList(1)
    //  this.changemsg = this.$store.state.changestate;
    //  console.log(this.changemsg)
  },
  methods:{
      getList1() {
      this.$axios.post(config.baseUrl + 'emergency/v1.0/infomation/list', { 
          pageIndex:1,
          pageSize:3,
          type:'1'
          }).then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.halfList1 = res.data.data.records
          } else {
           
          }

        }).catch((response) => {
          console.log(response);
        })
    },
    getList2() {
      this.$axios.post(config.baseUrl + 'emergency/v1.0/infomation/list', { 
          pageIndex:1,
          pageSize:3,
          type:'2'
          }).then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.halfList2 = res.data.data.records
          } else {
           
          }

        }).catch((response) => {
          console.log(response);
        })
    },
    getChart() {
      this.$axios.get(config.baseUrl + 'emergency/v1.0/plan/tj/'+JSON.parse(localStorage.getItem('user')).companyId)
      .then((res) => {
          console.log(res)
          if (res.data.meta.success) {
              var chartData =[]
              res.data.data.map(item =>{
                  chartData.push({
                      value:item.planCount,
                      name:item.planName
                  })
              })
            this.initCharts(chartData)
          } else {
           this.initCharts([{name:'综合应急预案',value:0
               
           },{name:'专项应急预案',value:0},{name:'现场处置方案',value:0}])
          }

        }).catch((response) => {
          console.log(response);
        })
    },
    initCharts (n) {
    　　let myChart = this.$echarts.init(this.$refs.chart);
    　　// 绘制图表
    　　myChart.setOption({
            title: {    
            },
            legend:{
                orient:'vertical',
                x:'0',
                y:'15%',
                textStyle:{
                    color:'#333'
                }
            },
            tooltip: {
                trigger: 'item',
                // formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color: ['#4a8fff', '#f22c34', '#f8ba34'],
            stillShowZeroSum: false,
            series: [
                {
                    name: '应急预案统计',
                    type: 'pie',
                    radius: '70%',
                    center: ['60%', '50%'],
                    data: n
                    // [{value: 23, name: '现场处置方案'},
                    //     {value: 1, name: '综合应急预案'},
                    //     {value: 13, name: '专项应急预案'}]
                        ,
                    label:{
                        normal:{
                            formatter:'{b}:{c}个',
                            textStyle:{
                                color:'#333'
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(128, 128, 128, 0.5)'
                        }
                    }
                }
            ]
        })
        window.onresize = function () {
            myChart.resize();
        }
    },
    getList(n){
       this.$axios
        .get(config.baseUrl2 + "getContingencyPlanList?page=1&limit=6&type="+n)
        .then(res => {

          if (res.data.code==0) {
            this.data = res.data.page.list
             console.log(res.data.page.list)
          } else {
            this.$message.warning(res.data.msg);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
		showmsg(){
			this.dialogVisible = true;
		},
    lookstatus(){
         let params ={
            "companyId":JSON.parse(localStorage.getItem('user')).companyId
         }
         this.$axios
         ({
            method: 'post',
            url: this.$baseUrl+"emergency/v1.0/selected/risk",
            data:params
         }).then(
           (res)=>{
              if(res.data.meta.success){
                let arr = res.data.data.riskIds
                let brr =  arr.split(",");
                 let crr = [];
                 brr.forEach(
                   (item)=>{
                      crr = [...crr,{riskId:item}]
                   }
                 )
                localStorage.newList = JSON.stringify(crr);
                this.changemsg = 4;
              }else{
                  this.newmsg();
              }
           }
         )
    },
    newmsg(){
      let params ={
            "companyId":JSON.parse(localStorage.getItem('user')).companyId
         }
        this.$axios
         ({
            method: 'post',
            url: this.$baseUrl+"emergency/v1.0/company/info",
            data:params
         }).then(
            (res)=>{
              let data = res.data.data;
              console.log(data);

              if(data.varEmergencyDept){
                  this.changeList = true;
                  this.$store.state.changestate = 2;
                  let arr =[];
                  if(localStorage.getItem("newList")){
                      arr = JSON.parse(localStorage.getItem("newList"));
                  }
                  if(arr.length>=2){
                     this.changemsg = 3;
                  }else{
                     this.changemsg = 2;
                  }
              }else{
                  this.changemsg = 1;
              }
         })
    },
    togochange(item){
       if(item=="basic"){
          this.$router.push(item)
       }else if(item=="risk"){
          if(this.changemsg>=2){
              this.$router.push(item)
          }else{
              this.$message.warning("请填写公司信息");
          }
       }else if(item=="resources"){
          if(this.changemsg>=3){
              this.$router.push(item)
          }else{
              this.$message.warning("请录入风险信息");
          }
       }
    }
  },
  created() {
    this.lookstatus();
    this.getList1()
    this.getList2()
    this.getChart()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.indexMain {
  padding: 0 30px;
  .banner{
      height: 300px;
      text-align: center;
      margin-top: 25px;
      .banner_div{
          position: relative;
          img{
              height: 300px;
              width: 1920px;
              position: absolute;
              left: 50%;
              margin-left: -960px;
          }
      }
  }
  .section1 {
		background: #fff;
        padding: 9px 30px 12px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
    .ml50 {
      margin-left: 50px;
    }
    .indexSearch {
      display: block;
      line-height: 36px;
      width: 79px;
      height: 36px;
      background: #4080ff;
      background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
      color: #fff;
      text-align: center;
      border: none;
      border-radius: 8px;
      margin-top: 3px;
      margin-left: 15px;
      cursor: pointer;
      > img {
        position: relative;
        top: -1px;
        margin-right: 3px;
      }
    }
    .indexSearch:hover {
      opacity: 0.8;
    }
  }
  .information_index{
      margin-top: 17px;
      .information_half{
          background: #fff;
          width: calc(50% - 20px);
          padding: 15px 30px 50px;
          #chart{
              height: 300px;
              width: 100%;
          }
          .bzImg_box{
              height: 300px;
              position: relative;
              img{
                  width: 100%;
                  position: absolute;
                  top: 32%;
              }
          }
          .halfDiv_top{
              margin-bottom: 20px;
              position: relative;
              span{
                  background: #00a0e9;
                  display: block;
                  position: absolute;
                  height: 16px;
                  width: 4px;
                  border-radius: 2px;
                  left: -11px;
                  top: 4px;
              }
              h3{
                line-height: 24px;
                font-weight: bold;
                font-size: 16px;
              }
              a{
                  color: #666;
                  margin-top: 2px;
              }
          }
          .half_list{
              li{
                  height: 36px;
                  border-bottom: 1px dotted #ccc;
                  line-height: 35px;
                  a{
                      display: block;
                      float: left;
                      max-width: calc(100% - 100px);
                      cursor: pointer;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                  }
                  &:hover a{
                      text-decoration: underline;
                      font-weight: bold;
                  }
                  span{
                      color: #999;
                      font-size: 12px;
                      float: right;
                      margin-right: 10px;
                  }
              }
          }
      }
  }
  .modules_main {
		background: #fff;
    margin-top: 20px;
    padding: 25px 0 0;
    .secTitle {
      padding-left: 25px;
      font-size: 16px;
      font-weight: bold;
      color: #666;
      margin-bottom: 20px;
    }
    .modules_list {
      padding: 0 150px;
      .modules {
        text-align: center;
        margin-bottom: 30px;
        a {
          display: block;
          width: 130px;
          margin: 0 auto;
          img {
            margin-bottom: 12px;
          }
          p {
            font-size: 16px;
            color: #666;
          }
        }
        a:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .section5 {
		background: #fff;
    margin-top: 20px;
    padding: 25px 0 50px;
    .secTitle {
      padding: 0 25px;
      font-size: 16px;
      font-weight: bold;
      color: #666;
      margin-bottom: 50px;
      .more {
        color: #7255e7;
        float: right;
        background: url("../../../static/images/more_icon.png") no-repeat right
          center;
        padding-right: 20px;
        font-size: 14px;
        font-weight: normal;
        margin-top: 2px;
      }
      .more:hover {
        opacity: 0.8;
      }
    }
    .resList {
      width: 550px;
      margin: 0 auto 50px;
      li {
        float: left;
        width: 100px;
        text-align: center;
        color: #666;
        cursor: pointer;
        position: relative;
        height: 30px;
        margin-right: 50px;
        > span {
          opacity: 0;
          position: absolute;
          display: block;
          width: 24px;
          height: 4px;
          border-radius: 2px;
          left: 50%;
          margin-left: -12px;
          bottom: 0;
          background: #009ff9;
        }
      }
      li:last-child {
        margin-right: 0;
      }
      li:hover,
      li.active {
        color: #009ff9;
        > span {
          opacity: 1;
        }
      }
    }
    .resCon {
      padding: 0 200px;
      .resCon_list {
        li {
          width: 50%;
          line-height: 42px;
          color: #666;
          float: left;
          a {
            display: block;
            position: relative;
            width: 80%;
            white-space: nowrap;
            margin:0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 10px;
          }
          a:before {
            content: ".";
            position: absolute;
            color: #666;
            font-size: 26px;
            left: 0;
            top: -8px;
          }
          a:hover {
            color: #009ff9;
          }
        }
      }
    }
  }
}
.selectmsg{
    cursor: not-allowed;
}
</style>
<style lang='less'>
.stepDialog{
    .el-dialog__body{
      padding: 0;
    }
    .step{
      .stepImg{
        text-align: center;
        padding: 35px 0 45px;
      }
      .stepBottom{
        background: #f9f9f9;
        height: 70px;
        border-radius: 0 0 8px 8px;
        line-height: 70px;
        text-align: center;
        img{
          margin-right: 5px;
          position: relative;
          top: -1px;
        }
        a.noteBtn{
          cursor: pointer;
          color: #7254e6;
          display: inline-block;
          height: 36px;
          line-height: 36px;
          width: 96px;
          text-align: center;
          border: 1px solid #3f80fe;
          border-radius: 8px;
          margin-left: 15px;
        }
        a.noteBtn:hover{
          opacity: .8;
        }
      }
    }
  }
</style>
